<!DOCTYPE html>
<html>

<head>
	<title>roughViz.js</title>
	<style>
		@font-face {
			font-family: "Gaegu";
			src: url("../assets/Gaegu-Light.ttf");
		}

		/*@import url('https://fonts.googleapis.com/css?family=Gaegu');*/
		@import url('https://fonts.googleapis.com/css?family=Roboto');

		/*@import url('https://fonts.googleapis.com/css?family=Indie+Flower');*/
		.wrapper {
			display: flex;
			flex: wrap;
		}

		h1,
		h2,
		h4 {
			font-family: 'Gaegu';
			font-weight: lighter;
			padding-bottom: 0;
			margin-bottom: 0;
			margin-top: 0;
		}

		h2 {
			font-family: 'Gaegu';
			font-size: 2.5rem;
		}

		p {
			font-family: 'Gaegu';
			color: grey;
			font-size: 1.3rem;
		}

		.dot {
			-webkit-animation: name 4s infinite;
			stroke: black;
		}

		@-webkit-keyframes name {
			0% {
				color: skyblue;
			}

			25% {
				color: teal;
			}

			50% {
				color: pink;
			}

			75% {
				color: yellow;
			}

			100% {
				color: coral;
			}
		}

		.project-grid {
			/*flex-direction: row;*/
			width: 100%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}

		.project-wrapper {
			/*width: 85%;*/
			flex-basis: 25%;
			padding: 1.9rem;
			margin-bottom: 0;
		}

		.desc {
			font-size: 1.1rem;
		}

		hr {
			max-width: 50%;
			opacity: .3;
		}

		code {
			display: block;
			text-align: left;
			background: #f5f5f5;
			padding-right: 0.5em;
			color: #333333;
			overflow-x: auto;
			font-size: 0.8rem;
			max-width: 100%;
			border: 1px solid tan;
		}

		.start {
			max-width: 45%;
		}


		body {
			background-color: #fff;
		}
	</style>
</head>

<body>
	<center>
		<h1 style='font-size: 8rem; letter-spacing: -4px;'> roughViz<span class="dot">.</span>js </h1>
		<!-- <h4> Chart Zoo </h4> -->
		<p> Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.<br>
			Based on D3v5 and rough.js.</p>
	</center>
	<div style="padding-left: 10%;" id="example"></div>
	<!-- <h1>Examples</h1> -->


	<center>
		<h2>Qualities</h2>
	</center>
	<center>
		<li class="project-grid">
			<ul class="project-wrapper">
				<h2>Flexible</h2>
				<p class="desc">Charts can be created from multiple data-sources! Use inline JSON. Load your own local file.
					Link to data at some url.</p>
			</ul>
			<ul class="project-wrapper">
				<h2>Aesthetic</h2>
				<p class="desc">Create charts with beautiful, sketchy-looking aesthetics. Or just make charts that look like a
					bunch of scribbles. </p>
			</ul>
			<ul class="project-wrapper">
				<h2>Simple</h2>
				<p class="desc">roughViz has a very easy API. Just create a chart and specify the parameters. No more method
					chaining or nested JSON. </p>
			</ul>
			<!-- 	<ul class="project-wrapper">
			<h2>Modern</h2>
			<p class="desc">The code was written as an ES Module using ES6+ and D3v5+.</p>
		</ul> -->
		</li>
		<br><br>
		<p style="max-width: 70%;"><b>Why?</b> roughViz was built to provide an easy way to create interactive, "sketchy"
			plots in the browser.
			Use these charts where the communication goal is to show intent or generality, and not absolute precision.
			Or just because they're fun and look weird.
			<!-- 	<br>While the charts are fun and look cool, they serve a valuable commincation purpose: communicating intent as opposed to a precise rendered graph.  -->
		</p>

		<br><br><br><br>
		<center>
			<h2>Quick Start</h2>
		</center>
		<hr>
		<br><br>
		<center>
			<p>Step 1: Load Library</p>
			<pre><code class="start">
&lt;script src=&quot;https://d3js.org/d3.v5.min.js&quot;&gt;&lt;/script&gt;
	</code></pre>
			<p>Step 2: Setup chart container</p>
			<pre><code class="start">
&lt;div id=&quot;chart&quot;&gt;&lt;/div&gt;
	</code></pre>
			<p>Step 3: Create chart</p>
			<pre><code class="start">
new roughBars.Bar(
  {
    element: '#example',
    data: 'https://gist.githubusercontent.com/mbostock/3310560/raw/98311dc46685ed02588afdcb69e5fa296febc1eb/letter-frequency.tsv',
    labels: 'letter',
    values: 'frequency',
    height:window.innerHeight * 0.7,
    width: window.innerWidth * 0.8,
    roughness: 3,
    color: 'pink',
    fillWeight: 1,
    strokeWidth: 0.5,
    stroke: 'black',
  }
);
	</code></pre>
			<p>That's it!</p>
			<p>With npm:</p>
			<pre><code class="start">
	npm install roughviz
</code></pre>
		</center>


		<br>

		<!-- 	<p>roughness</p>
	<p>fillStyle</p>
	<p>fillWeight</p>
	<p>strokeWidth</p>
	<br><br>

 -->

		<br><br><br><br>
		<center>
			<h2>Some Examples</h2>
			<p>(<a href="https://github.com/jwilber/roughViz">View Full API</a>)</p>
		</center>
		<hr>
		<br><br>
		<div class="wrapper">
			<div id="vis0"></div>
			<pre><code>
new roughBars.Scatter(
  {
    element: '#vis0',
    data: 'https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv',
    title: 'Hans Rosling (Gapminder 2007)',
    x: 'gdpPercap',
    y: 'lifeExp',
    radius: 'pop',
    colorVar: 'continent',
    highlightLabel: 'country',
    roughness: 1.5,
    width: window.innerWidth / 2,
    height: 500,
  }
);
</code></pre>
		</div>
		<div class="wrapper">
			<div id="vis1"></div>
			<pre><code>
new roughBars.Donut(
  {
    element: '#vis1',
    data: 'https://raw.githubusercontent.com/jwilber/jenkem_data/master/regions.json',
    title: 'Regions',
    labels: 'region',
    values: 'count',
    roughness: 4,
    colors: ['pink', 'coral', 'teal', 'skyblue'],
    highlight: 'gold',
    strokeWidth: 2,
    titleFontSize: '25px',
    fillWeight: 1.5,
    fillStyle: 'zigzag-line',
    width: window.innerWidth / 2,
    height: 450,
  }
);
	    </code>
	</div>
	<div class="wrapper">
	    <div id="vis2"></div>
	    <pre><code>new roughBars.Donut(
  {
    element: '#vis1',
    data: 'https://raw.githubusercontent.com/jwilber/jenkem_data/master/regions.json',
    title: 'Regions',
    labels: 'region',
    values: 'count',
    width: window.innerWidth / 2,
    roughness: 0,
    radius: 'petal_width',
    colors: ['pink', 'coral', 'teal', 'skyblue'],
    bowing: 0.1,
    highlight: 'gold',
    // stroke: 'black',
    strokeWidth: 1,
    titleFontSize: '25px',
    // fillWeight: 1.5,
    // simplification: 5,
    fillStyle: 'zigzag-line',
    height: 450,
    curbZero: false,
  }
);</code></pre>
		</div>
		<div class="wrapper">
			<div id="vis3"></div>
			<pre><code>new roughBars.Pie(
  {
    element: '#vis2',
    data: {
      labels: ['Reggae', 'Jah', 'Lax', 'd'],
      values: [40, 400, 40]
    },
    title: 'My Free Time',
    // titleFontSize: '55px',
    width: window.innerWidth / 2,
    roughness: 5,
    // radius: 'petal_width',
    colors: ['red', 'orange', 'blue', 'skyblue', 'red', 'green', 'black', 'grey'],
    // bowing: 0.1,
    stroke: 'black',
    strokeWidth: 5,
    strokeWidth: 3,
    fillStyle: 'zigzag',
    height: 400,
    // font: 0,
    fillWeight: 3.5,
  }
);</code></pre>
		</div>
<div class="wrapper">
	<div id="vis8"></div>
<pre>
<code>
new roughViz.StackedBar({
element: '#vis8',
data: [
	{month:'Jan', A:20, B: 5,  C: 10},
	{month:'Feb', A:25, B: 10, C: 20}
	
],
labels: 'month',
// values: 'frequency',
height: window.innerHeight * 0.7,
width: window.innerWidth * 0.8,
roughness: 3,
colors: [
	'red',
	'orange',
	'#f996ae',
	'skyblue',
	'#9ff4df',
	'green',
	'#f6f0a3',
	'#6bceee',
	'#d9b6fd',
],
fillWeight: 1,
strokeWidth: 0.5,
fillStyle: 'cross-hatch',
roughness: 0,
stroke: 'black',
});
</code>
</pre>
		</div>
	</center>


	<script src="index.js"></script>
</body>

</html>


<!-- 
Why?
Comfortable: Easy API.
Flexible: Allows you to enter data maunally, or from files. Plots are easily extendible.
Extendible:
Aesthetic:
Easy Interface:
MODERN: es6 + D3V5
 -->